@import "vars";

.fa-dropdown {
  /* 选择器没实际作用 */
}
.fa-dropdown-con {
  position: absolute;
  z-index: 10000;
  background-color: @color[white];
  color: black;
  border-radius: 5px;
  box-sizing: border-box;
  list-style: none;
  box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.3);
  .fa-dropdown-item {
    line-height: 35px;
    height: 35px;
    cursor: pointer;
    padding: 0px 20px;
    &:hover {
      background-color: ghostwhite;
      border-radius: 5px;
    }
  }
}
.fa-dropdown-con.bottom {
  &:before {
    content: "\e625";
    font-family: layui-icon !important;
    position: absolute;
    left: 50%;
    margin-left: -10px;
    top: -12px;
    font-size: 16px;
    transform: rotate(180deg);
    color: white;
  }
  margin-top: 10px;
}
.fa-dropdown-con.left {
  &:before {
    content: "\e625";
    font-family: layui-icon !important;
    position: absolute;
    left: 100%;
    margin-left: -5px;
    top: 50%;
    margin-top: -10px;
    font-size: 16px;
    transform: rotate(270deg);
    color: white;
  }
  margin-left: -6px;
}
.fa-dropdown-con.top {
  &::after {
    content: "\e625";
    font-family: layui-icon !important;
    position: absolute;
    left: 50%;
    margin-left: -10px;
    margin-top: -5px;
    font-size: 16px;
    color: white;
  }
  margin-top: -10px;
}
.fa-dropdown-con.right {
  &:before {
    content: "\e625";
    font-family: layui-icon !important;
    position: absolute;
    left: -12px;
    top: 50%;
    margin-top: -10px;
    font-size: 16px;
    transform: rotate(90deg);
    color: white;
  }
  margin-left: 6px;
}
